<g:render template="../home/header" ></g:render>



<div class="load_blk upload_area mTo_20" style="position: relative;" >
    <div class="crumbs mLe_20" style="border: 0;">
        <span>购买作品</span><em class="tubiao2">&nbsp;</em><span>${photo?.name} </span>
    </div>
    <div class="wid_1000 pic_blk2">
        <div class="pic_pic1 f_l">
            <div >
              <div style="position: relative;text-align:center;">
                    <div id="photo" style="position: absolute; z-index: -1" >
                        <img src="../${photo?.middleImagePath}" class="${photoFrameList?.first()?.description}" id="showPhotoId" />
                    </div>
                  <div id="frame"><img src="../images/heise_bg.jpg" id="showFrame"></div>
              </div>
            </div>
        </div>
        <div class="zp_content f_l">
            %{--<div class=" mBo_20">--}%
            %{--<input type="button" onclick="showPhotoFrame()" value="显示效果" class="annui annui1 mRi_10">更新作品预览效果图--}%
            %{--</div>--}%
            <h3>作品价格：<span  style="font-size: 26px; color:#ff7f00;" id="price">${Math.round(photo?.price)}元</span></h3>

                %{--<input type="button" value="添加到购物车" id="addShoppingCart" onclick="addShoppingCart()" class="annui annui1" style="width: 120px;">--}%
                %{--<g:link controller="order" action="shoppingCart" ><input type="button" value="添加到购物车" id="addShoppingCart" class="annui annui1" style="width: 120px;"></g:link>--}%

        </div>
    </div>
    <div class="zp_xxzz f_r" style="position: absolute; top:0px; right: -15px;">
        <div class="lude_content" style="height: 103px; border: 0;">
           <g:link controller="home" action="bestPhotographer" params="['userId':photo.user.id]" style="height: 103px; width:330px;">
            <div class="zp_userface f_l" style="width: 70px; height: 70px; margin: 15px 0 0 0;">
                <g:if test="${photobox.account.User.get(photo.userId)?.photoImage}">
                    <img src="${domain_name}${photobox.account.User.get(photo.userId)?.photoImage}" alt="" width="70" height="70" style="border-radius:50%;" />
                </g:if>
                <g:else>
                    <img src="${resource(dir: '/assets/img', file: 'headp_140.jpg')}" alt="" width="70" height="70" style="border-radius:50%;">
                </g:else>
            </div>
            <div class="lude_gongsi f_l" style="width: 200px; height: 60px; margin: 25px 0 0 10px;">
                <h4>作者：${photo?.user.nickName}</h4>
                <p>作品数量：${photoNum}</p>
            </div>
           </g:link>
        </div>
    </div>
</div>
<div class="kong_20"></div>

<div class="load_blk load_blk_ying">

    <div class="blk3_2" style="overflow: hidden;">
        %{--装表--}%
        <div class="zp_blk_L f_l" style="padding-bottom: 50px; width: 900px;" >

            <g:form controller="order" action="shoppingCart" method="post"  onsubmit="return checkLogin()">
                <div class="zp_zi" style="width: 700px;">
                    <label>作品尺寸：</label>
                    <div class="zp_InXX" >
                        <g:each in="${photoSizeList}"  status="i" var="it">
                        %{--选中尺寸--}%
                            <div class="zp_cichunqu f_l " >
                                <div  name="photoSizeCheckBox" required="" class="cichun" id="photoBox_${it.id}"  onclick="selectSize(${it.id})">${it.name}</div>
                            </div>
                        </g:each>
                    </div>
                </div>
                <div class="zp_InXX"  style="display: none;"><input type="text" name="photoId" value="${photo.id}" class="zp_zi_text"></div>
                <div class="zp_zi" style="width: 700px;">
                    <label>装裱方式：</label>
                    <div class="zp_InXX">
                        %{--<g:select onclick="showPhotoFrame()" name="photoFrame" id="photoFrame"  from="${photoFrameList}" optionKey="id" optionValue="name"></g:select>--}%
                        <g:each in="${photoFrameList}"  status="i" var="it">
                            <div class="zp_cichunqu f_l " >
                                <div  name="photoFrameCheckbox" required="" class="cichun" id="photoFrame_${it.id}"  onclick="selectFrame(${it.id})">${it.name}</div>
                            </div>
                        </g:each>
                    </div>
                </div>
                <div class="zp_zi" style="width: 700px;">
                    <label>选择纸张：</label>
                    <div class="zp_InXX">
                        %{--<g:select name="photoPaper" id="photoPaper" from="${photoPaperList}" optionKey="id" optionValue="name"></g:select>--}%
                        <g:each in="${photoPaperList}"  status="i" var="it">
                            <div class="zp_cichunqu f_l " >
                                <div  name="photoPaperCheckbox" required="" class="cichun" id="photoPaper_${it.id}"  onclick="selectPaper(${it.id})">${it.name}</div>
                            </div>
                        </g:each>
                    </div>
                </div>
                <div class="zp_zi" style="width: 700px; display: none;">
                    <label>尺寸：</label>
                    <div class="zp_InXX"><input type="text" name="photoSize" id="photoSize" value="${photoSizeList[0].id}" ></div>
                    <div class="zp_InXX"><input type="text" name="photoFrame" id="photoFrame" value="${photoFrameList[0].id}" ></div>
                    <div class="zp_InXX"><input type="text" name="photoPaper" id="photoPaper" value="${photoPaperList[0].id}" ></div>
                </div>
            <div class="zp_zi mBo_10" style="width: 700px;">
                <input type="submit" id="_buyButton" value="添加到购物车" class="annui annui1 mRi_10"><cite style=" display: inline-block; height: 20px; padding: 15px 0 0 0;"></cite>
            </div>
            </g:form>

        </div>
        %{--/装表--}%

        %{--右边列表--}%
        <div class="blk_r1 f_r">
            <div class="blk_r1 bor1 pTo_30">
                <div class="s_title">
                    <div class="line-g"></div>
                    <div class="s_titNa">
                        <div class="s_tit_p"><span class=" tubiao3 tubiao3_2">&nbsp;</span>More works</div>
                        <h3 class="">买了该作者的用户还买了</h3>
                    </div>
                </div>
                <div class="blk_r1con">
                    <g:each in="${photoOwner?}" status="i" var="it">
                        <div class="lude_content ${(i%2==0) ? 'bg_f2' : ''}">
                            <li>
                                <g:link controller="photo" action="show" params="[id:it?.id]">
                                    <div class="lude_gongtu f_l ${(it.showShape == 2) ? 'pic_cent' : ''}"><div><img src="../${it.smallImagePath}" border="0" ></div></div>
                                    <div class="lude_gongsi f_l">
                                        <h4>${it.name}</h4>
                                        <p>作者：${it.user?.username}</p>
                                        <p>￥${Math.round(it.price)}</p>
                                    </div>
                                </g:link>
                            </li>
                        </div>
                    </g:each>
                    <div class="s1_mone" style="display: none">
                        <g:link controller="photo" action="listDetails"><span class="none">更多&gt;&gt;</span></g:link>
                    </div>

                </div>
            </div>
        </div>
        %{--/右边列表--}%
    </div>

</div>
<script>
    var flag=false;
    function DrawImage(ImgD,iwidth,iheight){

//参数(图片,允许的宽度,允许的高度)
        var image=new Image();
        image.src=ImgD.src;
        if(image.width>0 && image.height>0){
            flag=true;
            if(image.width/image.height>= iwidth/iheight){
                var newHeight;
                var newWidth;
                if(image.width>iwidth){

                    newHeight=(image.height*iwidth)/image.width;

                }else{

                    newHeight=image.height;
                }
                return newHeight;
            }
            else{
                if(image.height>iheight){

                    newWidth=(image.width*iheight)/image.height;
                }else{
                    newWidth=image.width;

                }
                return newWidth;

            }

        }

    }
    window.onload=function(){
        var photo = new Image();
        photo.src =$('#showPhotoId').attr("src") ;
        var photoWidth = photo.width; //图片实际宽度
        var photoHeight = photo.height; //图片实际高度

        var frame = new Image();
        frame.src =$('#showFrame').attr("src") ;
        var frameWidth = frame.width; //相框实际宽度
        var frameHeight = frame.height; //相框实际高度
        var photoT;
        var photoL;
        var w = (frameWidth-photoWidth-70)/2;
        var h = (frameHeight-photoHeight-70)/2;
        var jiange = 80;  //相框与图片之间的最小间隔
        if(w<jiange){    // 图片宽度超出
            var newPhotoW = photoWidth-2*(80-w);
            var newPhotoH =  DrawImage(photo,newPhotoW,photoHeight);
             photoT =(frameHeight-newPhotoH)/2;
             photoL =(frameWidth-newPhotoW)/2+190;          //让图片在相框中心位置

            $('#showPhotoId').css("margin-left",photoL);
            $('#showPhotoId').css("margin-top",photoT);
            $('#showPhotoId').css("width",newPhotoW);
            $('#showPhotoId').css("height",newPhotoH);
            $('#photo').css("z-index","1");
        }else if(h<jiange){    //高度超出
            var newPhotoH = photoWidth-2*(80-w);
            var newPhotoW =  DrawImage(photo,photoWidth,newPhotoH);
            photoT =(frameHeight-photoHeight)/2;
            photoL =(frameWidth-newPhotoW)/2+190;          //让图片在相框中心位置

            $('#showPhotoId').css("margin-left",photoL);
            $('#showPhotoId').css("margin-top",photoT);
            $('#showPhotoId').css("width",newPhotoW);
            $('#showPhotoId').css("height",newPhotoH);
            $('#photo').css("z-index","1");
        } else{
             photoT =(frameHeight-photoHeight)/2;
             photoL =(frameWidth-photoWidth)/2+190;          //让图片在相框中心位置

            $('#showPhotoId').css("margin-left",photoL);
            $('#showPhotoId').css("margin-top",photoT);
            $('#photo').css("z-index","1");
        }




    }
    function checkLogin(){
        if(!'${session.userId}'){
            sAlert("请登录！");
            return false
        }else{
            return true
        }
    }
    function addShoppingCart(){
        if(!'${session.userId}') {
            sAlert("请登录！");
        }else {
            $.ajax({
                type: "POST",
                url: "<g:createLink controller="order" action="shoppingCart"/>",
                data: {photoId:${photo?.id}, photoFrame: $('#photoFrame').val(), photoPaper: $('#photoPaper').val(), photoSize: $('#photoSize').val(),json:1},
                dataType: "json",
                success: function (data) {
                    //var price = $('#price').html();
                    $("#shoppingCartNum").html(data.shoppingCartNum);
                    sAlert("添加到购物车成功")
                    //window.location.href = "<g:createLink controller='order' action='shoppingCart'/>";
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            });
        }
    }
    function showPhotoFrame(){

        $.ajax({
            type: "POST",
            url: "<g:createLink controller="order" action="showPhotoFrame "/>",
            data: {photoFrame: $('#photoFrame').val()},
            dataType: "json",
            success: function (data) {

                var descriptions = data.descriptions;

                document.getElementById('showFrame').setAttribute('src',descriptions)

            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        });

    }
    function selectSize(v){
        var photoSizeCheckbox = $("div[name='photoSizeCheckBox']");
        var photoFrameCheckbox = $("div[name='photoFrameCheckbox']");
        photoSizeCheckbox.each(function() {
            $(this).attr('class','cichun bor3');
            // $("#xuan").appendTo("#photoBox_"+v).hide();
        });
        $("#photoSize").val(v);
        $("#photoBox_"+v).attr('class','cichun bor3 current_CC');
    }
    selectSize(${photoSizeList[0].id})

    function selectFrame(v){
        var photoFrameCheckbox = $("div[name='photoFrameCheckbox']");
        photoFrameCheckbox.each(function() {
            $(this).attr('class','cichun bor3');
            // $("#xuan").appendTo("#photoBox_"+v).hide();
        });
        $("#photoFrame").val(v);
        $("#photoFrame_"+v).attr('class','cichun bor3 current_CC');
        showPhotoFrame();
    }
    selectFrame(${photoFrameList[0].id})

    function selectPaper(v){
        var photoPaperCheckbox = $("div[name='photoPaperCheckbox']");
        photoPaperCheckbox.each(function() {
            $(this).attr('class','cichun bor3');
            // $("#xuan").appendTo("#photoBox_"+v).hide();
        });
        $("#photoPaper").val(v);
        $("#photoPaper_"+v).attr('class','cichun bor3 current_CC');
    }
    selectPaper(${photoPaperList[0].id})
</script>
<script >

</script>
<g:render template="../home/footer" ></g:render>
%{--<script type="text/javascript" src="${resource(dir:'/photobox',file:'pop_uploadBtn.js')}"></script>--}%






